<template>
	<view class="bossCard">
		<gameBasics/>
		
		<view class="team_information">
			<image src="../../static/hehe.png" mode="aspectFill"></image>
			<text>咸鱼无敌队</text>
		</view>
			
		<view class="time">
			<flipcountdown @getTimeOut="getTimeOut" propsType="2" :endTime="endTime" value="00:00:00" :autoplay="autoplay" />
		</view>
		
		<view class="game_btn" @click="setAutoplay"  :style="{opacity:userPeople.power?1:0}">
			<view class="">			
			</view>
			{{gameChall[0].team_id!=userPeople.teamId?'准备中...':autoplay?'结束':'开始'}}
		</view> 
		<gameLoading/>
	</view>
</template>

<script>	
	import flipcountdown from '@/components/flipcountdown/flipcountdown.vue'
	export default {
		components: {
		        flipcountdown
		    },
		data() {
			return {
				autoplay:false,
				gameData:{},
				gameChall:{},
				teamList:[],
				game_config:{},
				userPeople:{},
				acceptStatus:true
			}
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")
		},
		onUnload() {
			this.acceptStatus=false
			// uni.$off('onMessage') 
		},
		mounted(){
			// let num =((new Date().getTime()-1655190788)/1000).toFixed(0)
			// 									let a=(num/60).toFixed(0)
			// 									let b =num%60
			//      function padding4(num) {
			//    return (Array(2).join("0") + num).slice(-2);
			// }
			// 									this.value='00:'+padding4(a)+':'+padding4(b)
			// 									this.autoplay=true
			uni.$on('onMessage',(res)=>{
				if(!this.acceptStatus) return;
					this.$nextTick(()=>{
						this.$store.commit('switchGame', {
							code: false
						})
					})
				this.gameData = res.data.game
				this.gameChall = res.data.game_chall
				this.game_config=res.data.game_config
				this.teamList = res.data.team
				this.userPeople=res.data.userPeople
				this.gameChall.forEach(item=>{
				
					if(item.team_id==this.userPeople.teamId){
						if(item.time!=0){
							this.autoplay=true
						}
									
					} 
				})
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")			
			this.$ws.socketTask.send({
				data: JSON.stringify({
				game_id,
				user_id: userData.id
			}),
				async success() {
					console.log("消息发送成功")
				}
			});

		},
		methods: {

			getTimeOut(number){
				console.log(number)
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要结束计时吗？',
					success: function (res) {
						if (res.confirm) {
							let data={
								game_id:that.gameData.id,
								activ_id:that.game_config.activ_id,
								team_id:that.userPeople.teamId,
								number
							}
							that.$myRuquestWs('home/game/game_end',data).then(res=>{
								
							})
							// uni.redirectTo({
							// 	url:'../preliminarySummary'
							// })
						} else if (res.cancel) {
							that.autoplay=true
						}
					}
				});
			},
			setAutoplay(){
				if(!this.userPeople.power) return;
				if(this.gameChall[0].team_id!=this.userPeople.teamId) return uni.showToast({
							title: '请等待其他队伍完成挑战！',
							icon:'none'
						}); 
				if(!this.autoplay){
					let data={
						game_id:this.gameData.id,
						activ_id:this.game_config.activ_id,
						team_id:this.userPeople.teamId
					}
					this.$myRuquestWs('home/game/team_go',data).then(res=>{
						uni.showToast({
							title: '开始计时',
							icon:'none'
						});
						this.autoplay=true
					})
				}else{
					this.autoplay=false
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.game_btn{
		padding: 0 calc(70vmin / 7.5);
	}
	.bossCard{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		.time{
			display: flex;
			justify-content: center;
			transform: scale(1.2);
			view{
				// transform: scale(1.1);
			}
		}
	}
	.team_information{
		display: flex;
		justify-content: center;
		image{
			width: calc(90vmin / 7.5);
			height: calc(90vmin / 7.5);
		}
		font-size: calc(50vmin / 7.5);
		color: #333333;
		font-weight: 700;
	}

</style>
